<template>
    <theme-box title="商品类型添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-group title="商户号" :required="true">
                    <select name="mchtId" class="form-control" v-model="mchtIdValue" style="width:265px;max-width: 265px">
                        <option v-for="mcht in mchtList" :value="mcht.value">
                            {{mcht.key | option-value 23}}
                        </option>
                    </select>
                </form-group>
                <form-input title="类型名称" :required="true" name="typeName"></form-input>
                <form-group title="上级商品类型">
                    <select name="typeUpdId" class="form-control" style="width:265px;max-width: 265px">
                        <option value="0">无</option>
                        <option v-for="type in typeList" :value="type.typeId">
                            {{type.typeName}}
                        </option>
                    </select>
                </form-group>
            </div>
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>

        </form>

    </theme-box>
</template>

<script>
    var serialize = require('form-serialize');

    export default {
        created() {

        },
        data: () => ({
            mchtIdValue: "",
            mchtList: [],
            typeList: [],
        }),
        mcht: false,
        watch: {
            mchtIdValue(v){
                let self = this;
                self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/dishType/queryname/" + v,
                    method: "GET"
                }).then(response => {
                    let list = response.content.dishTypeNameList;
                    self.$set("typeList", list)
                }, error => {
                });
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset();
                this.$post({
                    url: "/api/v2" + projectName_Url + "/plat/dishType/queryname/" + this.$els.form.mchtId.value,
                    method: "GET"
                }).then(response => {
                    let list = response.content.dishTypeNameList;
                    this.$set("typeList", list)
                }, error => {
                });
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                }, error => {
                });
            }
            // typeFn(data) {
            // 	let self = this;
            // 	var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
            // 	self.$post({
            // 		url: "/api/v2" + projectName_Url + "/plat/dishType/query/"+mchtId,
            // 		method:"GET"
            // 	}).then(response => {
            // 		let list = response.content.dishTypeNameList;
            // 		self.$set("typeList",list)
            // 	}, error => {});
            // },
        },
        ready: function () {
            let self = this;
            self.getMcht();
            // self.typeFn();
            $(this.$els.form).validate({
                submitHandler: function () {
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/dishType/add",
                        method: "post",
                        data: _data
                    }).then(response => {
                        let data = {
                            title: "操作成功",
                            content: "是否到商品类型列表查看?"
                        }
                        self.reset();
                        Midway.confirm(data).then(function () {
                            self.$route.router.go('/cuisine/menuList');
                        })
                    });
//                    location.reload();
                },
                rules: {
                    mchtId: {
                        required: true
                    },
                    typeName: {
                        required: true,
                        maxlength:10
                    }
                }
            });

        }
    }
</script>
